<template>
  <div :class="`${prefixCls}-title`">
    <span>{{ title }}</span>
    <div class="headTool">
      <slot name="toolbar"></slot>
      <el-divider direction="vertical" v-if="$slots.toolbar && showTableSetting" />
      <TableSettingComponent :setting="tableSetting" v-if="showTableSetting" @columns-change="handleColumnChange">
      </TableSettingComponent>
    
    </div>
  </div>
</template>
<script setup lang="ts">
import { useDesign } from '@/hooks/web/useDesign'
import { PropType } from 'vue'
import { ColumnChangeParam, TableSetting } from '../types/table'
import { Recordable } from '/#/global'
import TableSettingComponent from './settings/index.vue';

const { prefixCls } = useDesign('basic-table-header')
const emit = defineEmits<{
  (e: 'columns-change', data: ColumnChangeParam[]): void
}>()

const props = defineProps({
  title: {
    type: [Function, String] as PropType<
      string | ((data: Recordable) => string)
    >
  },
  tableSetting: {
    type: Object as PropType<TableSetting>
  },
  showTableSetting: {
    type: Boolean
  },
  titleHelpMessage: {
    type: [String, Array] as PropType<string | string[]>,
    default: ''
  }
})

function handleColumnChange(data: ColumnChangeParam[]) {
  emit('columns-change', data);
}
</script>
<style lang="scss">
.headTool {
  display: inline-flex;
  align-items: center;
}
</style>